﻿
@{
    ViewData["Title"] = "RoleIndex";
}
<div class="layui-row layui-col-space10">
    <div class="layui-card" id="headsearch">
        <div class="layui-card-body" style="padding: 0px;">
            <form class="layui-form" action="javascript:;" id="queryform">
                <div class="layui-form-item">

                    @*
                    <input type="hidden" name="OrderId" value="@ViewBag.OrderId" />
                    <input type="hidden" name="UserId" value="@ViewBag.UserId" />
                    <div class="layui-inline">
                         <label class="layui-form-mid">发票状态</label>
                         <div class="layui-input-inline" style="width: 100px;">
                             <select name="InvoiceState" id="InvoiceState">
                                 <option value="">--请选择--</option>
                                 @foreach (int val in Enum.GetValues(typeof(InvoiceState)))
                                 {
                                     <option value="@(val)">@(((InvoiceState)val).ToString())</option>
                                 }
                             </select>
                         </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-mid">时间</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="StartDate" id="StartDate" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="EndDate" id="EndDate" placeholder="结束时间">
                        </div>
                    </div>

                    *@
                    <div class="layui-inline">
                        <label class="layui-form-mid">关键词</label>
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div id="search" class="layui-btn submitbtn " data-type="search" lay-submit lay-filter="search"> <i class="layui-icon layui-icon-search"></i>查找</div>
                        <div id="reset" type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 0px;">
            <table id="listData" class="layui-hide" lay-filter="listData"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="pear-btn pear-btn-primary pear-btn-md" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</div>
    @*<div class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</div>*@
</script>
@*tablebar*@
<script type="text/html" id="tablebar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></button>
    @*<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>*@
</script>
<script type="text/plain" id="moreTool">
    [
        [{txt: "导出信息", event: "progress"}]
        [{txt: "下载文件", event: "resolve"}]
        [{txt: "查看详情", event: "reopen"}]
    ]
</script>
<script type="text/html" id="tpl_IsEnable">
        <input type="checkbox" name="IsEnable" objid="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsEnable" checked="{{ d.IsEnable == 0 ? 'true' : 'false' }}">
</script>

@*<script type="text/html" id="tplIsEnable">
        <input type="checkbox" name="IsEnable" objid="{{d.Id}}" value="true" lay-skin="switch" lay-text="启用|关闭" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>*@

@*<script type="text/html" id="tplable">
 小圆点：
  <span class="layui-badge-dot"></span>
  <span class="layui-badge-dot layui-bg-orange"></span>
  <span class="layui-badge-dot layui-bg-green"></span>
  <span class="layui-badge-dot layui-bg-cyan"></span>
  <span class="layui-badge-dot layui-bg-blue"></span>
  <span class="layui-badge-dot layui-bg-black"></span>
  <span class="layui-badge-dot layui-bg-gray"></span>
  常规弧形徽章：
  <span class="layui-badge">6</span>
  <span class="layui-badge">99</span>
  <span class="layui-badge">61728</span>
  <span class="layui-badge">赤</span>
  <span class="layui-badge layui-bg-orange">橙</span>
  <span class="layui-badge layui-bg-green">绿</span>
  <span class="layui-badge layui-bg-cyan">青</span>
  <span class="layui-badge layui-bg-blue">蓝</span>
  <span class="layui-badge layui-bg-black">黑</span>
  <span class="layui-badge layui-bg-gray">灰</span>
</script>*@
@section Scripts{
    <script>
           layui.use(['table', 'form', 'jquery','laydate', 'drawer', 'dropdown',  'upload','layer', 'popup'], function () {
            let $ = layui.jquery;
            let layer = layui.layer;
            let table = layui.table;
            let form = layui.form;
            let laydate = layui.laydate;
            let upload = layui.upload;
            let drawer = layui.drawer;
            let dropdown = layui.dropdown;
            let popup = layui.popup;

            abc.indexInit();
            //监听头工具栏事件
            table.on('toolbar(listData)',function(obj) {
                if (obj.event === 'add') {
                    abc.open({ title:'新增', url:'@(Url.Action("Add"))', area:['100%', '90%'], end:window.refresh });
               } else if (obj.event === 'refresh') {
                   window.refresh();
               } else if (obj.event === 'batchRemove') {
                   let data = table.checkStatus(obj.config.id).data;
                    if (data.length === 0) {
                        layer.msg("未选中数据", { icon: 3,time: 1000});
                        return false;
                    }
                    let ids = "";
                    for (let i = 0; i < data.length; i++) {
                        ids += data[i].userId + ",";
                    }
                    ids = ids.substr(0, ids.length - 1);
                   abc.delete({url: "@(Url.Action("Delete"))", data: { ids: ids }, success: function () {window.refresh()}});
               }
            });

            table.on('tool(listData)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'delete') { //删除
                    abc.delete({url:"@(Url.Action("Delete"))",data:{ ids: data.Id },success:function(){obj.del();window.refresh()}});
                } else if (layEvent === 'edit') { //编辑
                    window.edit(obj);
                } else if (obj.event === 'save') {
                    if (editrowids.indexOf(obj.data.Id) == -1) {
                        popup.failure("请先修改后再保存")
                    }
                    else {
                        popup.success("保存成功消息")
                    }
                }

            });
            //table 行双击事件
            table.on('rowDouble(listData)', function (obj) { window.edit(obj); });
            //table 行中的事件监听
            //编辑
            window.edit=  function(obj) {
               abc.open({ title: '编辑 - '+obj.data.Name, url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['100%', '90%'], end: window.refresh });
            }
            //IsEanble 开关事件
            form.on('switch(IsEnable)', function (obj) {
                //console.log(this, obj, { Id: $(this).attr('objid'), isEnable: obj.elem.checked });
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked,type:'isenable' }});
            });

            //Table 初始化
            //, templet: '#tpl_user'
            var cols= [
                    [
                        //, templet: '#tplRechargeState'
                        //{checkbox:true},
                        //{ type: 'numbers', fixed: 'left', rowspan: 1 },
                        //{ title: '标签', 'toolbar': '#tplable', fixed: 'left', width: 100 },
                        //{ title: 'ID', field: 'Id', width: 60 },

                        { title: 'ID', field: 'Id', width: 40, align:'center' },
                        //{ title: '标识', field: 'Code', minWidth: 60, align:'center' },
                        { title: '名称', field: 'Name', width: 150, align:'center' },
                        { title: '排序', field: 'Sort', width: 60, align:'center' },
                        { title: '是否启用', field: 'IsEnable',width: 80, align: 'center', templet:'#tpl_IsEnable' },
                        { title: '备注', field: 'Remark', minWidth: 60, align:'center' },
                        { title: '创建用户ID', field: 'CreatorUserId', minWidth: 60, align:'center',hide:true },
                        { title: '创建用户', field: 'CreatorUserName', minWidth: 60, align:'center' },
                        { title: '创建时间', field: 'CreationTime', width: 140, align:'center' },
                        { title: '更新用户ID', field: 'UpdateUserId', minWidth: 60, align:'center',hide:true },
                        { title: '更新用户', field: 'UpdateUserName', minWidth: 60, align:'center' },
                        { title: '更新时间', field: 'UpdateTime', minWidth: 60, align:'center' },
                        //{ title: '默认假删除', field: 'IsDeleted', minWidth: 60, align:'center' },
                        //{ title: '删除用户ID', field: 'DeletedUserId', minWidth: 60, align:'center' },
                        //{ title: '删除用户', field: 'DeletedUserName', minWidth: 60, align:'center' },
                        //{ title: '删除时间', field: 'DeletedTime', minWidth: 60, align:'center' },

                        { title: '操作', fixed: 'right', width: 140, align: 'left', toolbar: '#tablebar' }
                    ]
                ];
            //abc.initTablePlug(table, "listData", cols, { title: '角色', tablePlug: tablePlug });
            abc.initTable( "listData", cols, { title: '角色' });
            //表格下拉菜单
            window.tableDone = function (res, curr, count) {
                for (var i = 0; i < res.data.length; i++) {
                      dropdown.render({
                          elem: '#more_' + res.data[i].Id
                           , data: [
                              {title: '导出信息', id: 100 },
                              {title: '下载文件', id: 101},
                              {title: '查看详情', id: 102}
                            ]
                          , id: '#more_' + res.data[i].Id
                          , click: function (obj) {
                              layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                          }
                      });
    				}
            }
            //提交搜索
            form.on('submit(search)', function (obj) {
                abc.search('listData', '@(Url.Action("GetList"))', obj.field, { method: "post", done: window.tableDone });
                return false;
            });
            $("#search").click();//初始化完成后 搜索一次
            window.refresh = function () {
                //table.reload("listData");
                $("#search").click();
            };
            var editrowids = "";//编辑了的行ID
            //监听单元格编辑
            table.on('edit(listData)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
                //layer.msg('[ID: ' + data.Id + '] ' + field + ' 字段更改为：' + value);

                //遍历对象属性
                for (var datafield in data) {
                    if (field === datafield) {
                        if (editrowids.indexOf(data.Id) == -1) {
                            editrowids += "," + data.Id;//把此列标记为已修改
                        }
                        console.dir(datafield);//输出姓名
                        console.dir(data[datafield]);//输出分数
                    }

                }
            });
            //事件集合
            var active = {
                    example: function () {
                    },
                    example1: function () {
                        }
                    };
            //注册layui-btn 事件
            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            // 初始化日期选择
            //abc.initDate('StartDate,EndDate');
        });
    </script>
}

@* callback 回调函数
popup.success("成功消息",callback)
    popup.failure("失败消息",callback)
    popup.warning("警告消息",callback)*@
